<template>
  <div class="mv" v-show="showPlayer">
    <div
      :class="['title', 'play', { pause: iconplay }]"
      @click.stop="showPlayer = false"
    >
      <span class="iconfont icon-xiangxia"></span>
      <span>视频</span>
    </div>
    <video :src="mvlist" controls="controls" autoplay="autoplay" width="100%">
      您的浏览器不支持 video 标签。
    </video>

    <van-tabs v-model="active">
      <van-tab title="最新">
        <div class="new" v-for="(value, index) in getCommentMv" :key="index">
          <div class="img">
            <img :src="value.user.avatarUrl" />
          </div>
          <div class="text">
            <p class="name">{{ value.user.nickname }}</p>
            <p>{{ value.content }}</p>
          </div>
        </div>
      </van-tab>
      <van-tab title="热评">
        <div class="how" v-for="(value, index) in hotComments" :key="index">
          <div class="img">
            <img :src="value.user.avatarUrl" alt="" />
          </div>
          <div class="text">
            <p class="name"> {{ value.user.nickname }}</p>
            <p>
              {{ value.content }}
            </p>
          </div>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>
<script>
import { getMvUrl, getCommentMv } from "../../api/video";
export default {
  props: ["id"],
  data() {
    return {
      active: 2,
      mvlist: null, //装mv数据
      showPlayer: false,
      iconplay: true, //播放按钮
      getCommentMv: null, //普通评论
      hotComments: null, //热评
    };
  },
  methods: {
    // 播放暂停mv
    toggleplay() {
      if (this.iconplay) {
        this.$refs.audio.play(); //播放音乐

        clearInterval(this.clearset); //清除定时器
        this.clearset = setInterval(() => {
          let currentTime = this.$refs.audio.currentTime; //实时变化时间
          let duration = this.$refs.audio.duration; //总时间
          this.timeLeft = currentTime;
          // 计算滚动条值
          this.value = (currentTime / duration) * 100;
          if (this.value == 100) {
            clearInterval(this.clearset);
            this.$refs.audio.pause(); //暂停音乐
            this.iconplay = true;
          }
        }, 999);
      } else {
        this.$refs.audio.pause(); //暂停音乐
        clearInterval(this.clearset);
      }

      this.iconplay = !this.iconplay; //切换页面
    },
  },
  created() {},
  watch: {
    id: {
      handler(val) {
        console.log(9999999999999, val), (this.showPlayer = true);
        //mv地址
        getMvUrl({ id: val }).then((data) => {
          this.mvlist = data.data.url;
          console.log("获取播放地址",data);
        });
        //mv评论
        getCommentMv({ id: val }).then((data) => {
          console.log("mv评论", data);
          this.getCommentMv = data.comments;
          console.log(11, this.getCommentMv); //普通评论
          this.hotComments = data.hotComments; //热评
          console.log("热评", this.hotComments);
        });
      },
    },
  },
};
</script>
<style lang="less">
.mv {
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  bottom: 0px;

  z-index: 100;
  // height: 100%;
  // position: absolute;
  position: fixed;
  background-color: rgba(255, 255, 255);
  .title {
    font-size: 22px;
    width: 100px;
    padding: 10px;
    font-weight: bold;
  }
  .new {
    width: 100%;
    height: 50%;
        align-items: center;
    // background-color: yellow;
    padding-bottom: 10px;
    display: flex;
    .img {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      display: flex;
      img {
        width: 40px;
        height: 40px;
        background-size: 100% auto;
        border-radius: 50%;
      }
    }
    .text {
      .name {
        font-size: 8px;
      }
      p {
        font-size: 12px;
        line-height: 16px;
        // border: 1px solid yellow;
      }
    }
  }

   .how {
    width: 100%;
    height: 50%;
    // background-color: yellow;
    padding-bottom: 10px;
    display: flex;
    .img {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      display: flex;
      img {
        width: 40px;
        height: 40px;
        background-size: 100% auto;
        border-radius: 50%;
      }
    }
    .text {
      .name {
        font-size: 8px;
      }
      p {
        font-size: 12px;
        line-height: 16px;
        // border: 1px solid yellow;
      }
    }
  }
}
</style>